<!-- 竖版2个医生 -->
<template>
    <div class="three_el_container" :style="{ backgroundColor: colorConfig.backgroundColor, color: colorConfig.textColor }">
        <div class="three_el-header" style="padding: 0px;">
            <div style="width: 100%;height: 100%;clear: both;">
                <div class="three_header_logo">
                    <img src="../assets/icon.png" class="icon" />
                </div>
                <div class="three_header_title">心血管内科一|一诊室</div>
                <div class="three_header_date">
                    <div>{{ timeStr }}</div>
                    <div class="time">{{ dateStr }}</div>
                </div>
            </div>
        </div>
        <div class="three_el-main"  style="padding: 0px;">
            <div class="three_main_item_2 three_oneCls">
                <div class="three_common" :style="{ backgroundColor: colorConfig.contentBackgroudColor }">
                    <div class="three_common_left">
                        <div class="three_left_header">
                            <img src="../assets/doctor_header.jpg" width="100%" height="100%" />
                        </div>
                        <div class="three_left_docInfo">
                            <h2>{{ oneData.doctorName }}</h2>
                            <h3>{{ oneData.doctorPositional }}</h3>
                        </div>
                    </div>
                    <div class="three_common_right">
                        <div class="three_common_right_0">
                            <div class="three_looking">
                                <div class="c0">正在就诊</div>
                                <div class="c1">{{ oneData.curPatientName }}</div>
                            </div>
                            <div class="three_ready">
                                <div class="c0">准备就诊</div>
                                <div class="c1">{{ oneData.waitPatientName }}</div>
                            </div>
                        </div>
                        <div class="three_common_right_1">
                            <div class="r0">
                                <div class="three_r0_1">等候就诊</div>
                                <div class="three_r0_2"></div>
                                <div class="three_r0_3">
                                    <table>
                                        <tr v-for="(item, index) in waitItems0" :key="index">
                                            <td>{{ item.showTitle }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="three_main_item_2 three_twoCls">
                <div class="three_common" :style="{ backgroundColor: colorConfig.contentBackgroudColor }">
                    <div class="three_common_left">
                        <div class="three_left_header">
                            <img src="../assets/doctor_header.jpg" width="100%" height="100%" />
                        </div>
                        <div class="three_left_docInfo">
                            <h2>{{ twoData.doctorName }}</h2>
                            <h3>{{ twoData.doctorPositional }}</h3>
                        </div>
                    </div>
                    <div class="three_common_right">
                        <div class="three_common_right_0">
                            <div class="three_looking">
                                <div class="c0">正在就诊</div>
                                <div class="c1">{{ twoData.curPatientName }}</div>
                            </div>
                            <div class="three_ready">
                                <div class="c0">准备就诊</div>
                                <div class="c1">{{ twoData.waitPatientName }}</div>
                            </div>
                        </div>
                        <div class="three_common_right_1">
                            <div class="r0">
                                <div class="three_r0_1">等候就诊</div>
                                <div class="three_r0_2"></div>
                                <div class="three_r0_3">
                                    <table>
                                        <tr v-for="(item, index) in waitItems1" :key="index">
                                            <td>{{ item.showTitle }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="three_main_item_2 three_twoCls">
                <div class="three_common" :style="{ backgroundColor: colorConfig.contentBackgroudColor }">
                    <div class="three_common_left">
                        <div class="three_left_header">
                            <img src="../assets/doctor_header.jpg" width="100%" height="100%" />
                        </div>
                        <div class="three_left_docInfo">
                            <h2>{{ threeData.doctorName }}</h2>
                            <h3>{{ threeData.doctorPositional }}</h3>
                        </div>
                    </div>
                    <div class="three_common_right">
                        <div class="three_common_right_0">
                            <div class="three_looking">
                                <div class="c0">正在就诊</div>
                                <div class="c1">{{ threeData.curPatientName }}</div>
                            </div>
                            <div class="three_ready">
                                <div class="c0">准备就诊</div>
                                <div class="c1">{{ threeData.waitPatientName }}</div>
                            </div>
                        </div>
                        <div class="three_common_right_1">
                            <div class="r0">
                                <div class="three_r0_1">等候就诊</div>
                                <div class="three_r0_2"></div>
                                <div class="three_r0_3">
                                    <table>
                                        <tr v-for="(item, index) in waitItems2" :key="index">
                                            <td>{{ item.showTitle }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="three_el-footer"  style="padding: 0px;">
            <div class='three_divWrap'>
                　　　　<div class='div'>
                    温馨提示:请保管好自己的贵重物品!
                    　　　　</div>
                　　</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            timeStr: "",
            dateStr: "",
            oneData: {},
            twoData: {},
            threeData: {},
            waitItems0: [],
            waitItems1: [],
            waitItems2: [],
            colorConfig: {}
        };
    },
    mounted() {
        this.colorConfig = this.GLOBAL.colorConfig;
        const event = new Date();
        const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
        this.dateStr = event.toLocaleDateString(undefined, options);
        this.timeStr = getTimer();

        window.addEventListener("LOGIN_SUCCESS", (res) => {
            this.colorConfig = this.GLOBAL.colorConfig;
        });
        //更新医生信息
        window.addEventListener("CURRENT_UPDATE", () => {
            setCurrTable();
        });
        window.addEventListener("WAIT_UPDATE", (res) => {
            setWaitTable();
        });

        setInterval(() => {
            this.timeStr = getTimer();
        }, 1000);


        let __this = this;
        function setCurrTable() {
            let data = window['queueObject']['contentQueue'];
            var arr = JSON.parse(JSON.stringify(data));
            console.error("CURRENT_UPDATE", arr);
            var vArr = [];
            vArr = arr;
            __this.oneData = vArr[0] ? vArr[0] : {
                doctorName: "",
                doctorUrl: "",
                doctorDetail: "",
                doctorPositional: "",
                doctorIntro: "",
                showTitle: "",
                curPatientName: "",
                waitPatientName: "",
            };
            __this.twoData = vArr[1] ? vArr[1] : {
                doctorName: "",
                doctorUrl: "",
                doctorDetail: "",
                doctorPositional: "",
                doctorIntro: "",
                showTitle: "",
                curPatientName: "",
                waitPatientName: "",
            };
            __this.threeData = vArr[2] ? vArr[2] : {
                doctorName: "",
                doctorUrl: "",
                doctorDetail: "",
                doctorPositional: "",
                doctorIntro: "",
                showTitle: "",
                curPatientName: "",
                waitPatientName: "",
            };
        }

        function setWaitTable() {
            let data = window['queueObject']['waitQueue'];
            var arr = JSON.parse(JSON.stringify(data));
            __this.waitItems0 = arr[0] ? arr[0].players : [];
            __this.waitItems1 = arr[1] ? arr[1].players : [];
            __this.waitItems2 = arr[2] ? arr[2].players : [];
        }

        setCurrTable();
        setWaitTable();
    },
}

function getTimer() {
    let date = new Date();
    let seconds = date.getSeconds();
    let hours = date.getHours();
    let minutes = date.getMinutes();
    return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds)
}

</script>

<style lang="scss">
.three_el_container {
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.three_el-main {
    text-align: center;
    padding: 0px;
    margin: 0px;
    height: calc(100% - 120px);
    width: 100%;
}

.three_main_item_2 {
    height: calc(33% - 15px);
    padding-left: 10px;
    padding-right: 10px;
    width: calc(100% - 20px);
}

.three_oneCls {
    padding-top: 10px;
    padding-bottom: 5px;
}

.three_twoCls {
    padding-top: 5px;
    padding-bottom: 10px;
}


.three_common {
    border-radius: 6px;
    width: 100%;
    height: 100%;
    background-color: #1E55A8;
}

.three_common .three_common_left {
    float: left;
    width: calc(40% - 6px);
    height: calc(100% - 12px);
    // background-color: blueviolet;
    margin-left: 6px;
    margin-top: 6px;
    margin-bottom: 6px;
}

.three_left_header {
    width: 100%;
    height: 80%;
}

.three_left_docInfo {
    height: 20%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.2);
}

h2,
h3 {
    padding: 0px;
    margin: 0px;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 16px;
}

.three_common .three_common_right {
    float: left;
    width: 60%;
    height: calc(100% - 12px);
    // background-color: blueviolet;
    margin-top: 6px;
    margin-bottom: 6px;
}

.three_common_right_0 {
    height: 50px;
}


.three_common_right_0 .three_looking {
    float: left;
    height: 50px;
    line-height: 50px;
    width: calc(60% - 10px);
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    font-size: 13px;
    border-radius: 6px;
    margin-right: 5px;
    margin-left: 5px;
}

.three_looking .c1 {
    font-size: 18px;
    font-weight: bold;
}

.three_looking div {
    clear: both;
    line-height: 25px;
}

.three_common_right_0 .three_ready {
    float: left;
    height: 50px;
    font-size: 13px;
    line-height: 50px;
    width: calc(40% - 5px);
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    margin-right: 5px;
}

.three_ready .c1 {
    font-size: 18px;
    font-weight: bold;
}

.three_ready div {
    clear: both;
    line-height: 25px;
}

.three_common_right_1 {
    height: calc(100% - 50px);
    // background-color: #ccc;
}

.three_common_right_1 .r0 {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    // background-color: #c8d6e6;
    background-color: rgba(255, 255, 255, 0.2);
    margin-left: 5px;
    margin-top: 10px;
    margin-right: 5px;
    border-radius: 6px;
}

.three_r0_1 {
    width: 65px;
    font-size: 35px;
    height: 100%;
    float: left;
    vertical-align: middle;
    padding-left: 5px;
    padding-right: 5px;
    // margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.three_r0_2 {
    width: 2px;
    height: calc(100% - 10px);
    float: left;
    // background-color: #fff;
    background-color: rgba(255, 255, 255, 0.5);
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
    overflow: hidden;
}

.three_r0_3 {
    width: calc(100% - 77px);
    height: 100%;
    float: left;
    vertical-align: middle;
    font-size: 18px;
    overflow-x: hidden;
    overflow-y: auto;
}

.three_r0_3>table>tr {
    height: 40px;
    line-height: 40px;
    font-size: 22px;
}



.three_el-header,
.three_el-footer {
    text-align: center;
    height: 60px;
    line-height: 60px;
    font-size: 25px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0px;
    padding: 0px;
}

.three_header_logo {
    // background-color: rgba(255, 255, 255, 0.1);
    font-size: 20px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    float: left;
}

.three_header_logo .icon {
    height: 50px;
    width: 50px;
    text-align: right;
    vertical-align: middle;
}

.three_header_title {
    font-size: 18px;
    font-weight: bold;
    width: calc(64% - 60px);
    height: 60px;
    line-height: 60px;
    float: left;
    text-align: right;
    padding-right: 0px;
}

.three_header_date {
    font-size: 18px;
    width: calc(35%);
    height: 60px;
    line-height: 60px;
    float: left;
    text-align: right;
}

.three_header_date div {
    height: 30px;
    line-height: 30px;
    padding-right: 0px;
    font-size: 30px;
    padding-top: 5px;
}

.three_header_date .time {
    font-size: 12px;
    height: 20px;
    padding-top: 0px;
}

.three_divWrap {
    width: calc(100%); //(宽度)
    overflow: hidden; //（超出隐藏）
}

.div {
    display: inline-block;
    white-space: nowrap;
    animation: 10s div linear infinite normal;
}

//根据自己情况调节，
@keyframes div {
    //起始位置
    0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    //终点位置
    100% {
        transform: translateX(-150%);
        -webkit-transform: translateX(-150%);
    }
}

//划过暂停
// .div:hover {
//     display: inline-block;
//     white-space: nowrap;
//     animation: 10s div linear infinite normal paused;
// }
</style>